<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<text slot='content'>人像设置</text>
		</cu-custom>
		<view class="form-box">
			<view class="image-box" style="overflow: hidden;">
				<vueCropper class="vue-cropper" ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
				 :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original"
				 :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight"
				 :fixedBox="option.fixedBox" :centerBox="option.centerBox" :high="option.high"
				 @cropMoving='cropMoving'
				 @imgMoving='cropMoving'></vueCropper>
			</view>
			<text>大小:{{imgSize}}</text>
		</view>
		<view style="padding: 10px 30px;">
			<view class="btns">
				<a-button class="btn" @click="chooseImage">选择照片</a-button>
				<a-button class="btn" @click="submit" v-show="!!option.img">设置</a-button>
			</view>
			<view style="color:red;">
				注意：该头像照片用于进出学校人脸识别，请务必认真上传。
			</view>
		</view>
	</view>
</template>

<script>
	import {
		VueCropper
	} from 'vue-cropper'
	import {debounce} from "@/a/utils/api.js"
	export default {
		components: {
			VueCropper
		},
		onLoad(e) {
			e.photo && (this.option.img = 'data:image/png;base64,'+e.photo);
		},
		data() {
			return {
				imgSize:'',
				option: {
					img: '',
					outputSize: 0.4, //剪切后的图片质量（0.1-1）
					full: false, //输出原图比例截图 props名full
					outputType: 'png',
					high: false,
					canMove: true, //能否拖动图片
					original: false, //上传图片按照原始比例渲染
					canMoveBox: true, //能否拖动截图框
					autoCrop: true, //是否自动生成截图框
					fixedBox: false, //截图框固定大小
					centerBox: true, //截图框是否限制在图片里
				}
			}
		},
		methods: {
			chooseImage(key) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: res => {
						this.$set(this.option, 'img', res.tempFilePaths[0]);
					}
				});
			},
			cropMoving(){
				const func = debounce(c=>{
					// 获取截图的blob数据
					this.$refs.cropper.getCropBlob((data) => {
						var reader = new FileReader();
						reader.onload = e => {
							this.imgSize = e.total/1024 + 'KB';
						}
						reader.readAsArrayBuffer(data);
					});
				},800)();
			},
			getCropData() {
				return new Promise(r => {
					// 获取截图的base64 数据
					this.$refs.cropper.getCropData((data) => {
						r(data.split(",")[1]);
					});
				});
			},
			async submit(e) {
				let photo = await this.getCropData();
				if (!photo) return;
				await this.prompt("是否确定把当前选框照片设置为人脸识别照片？");
				//设置人像照片
				this.$http.post('/api/v1/student/updateStudent', {
					photo,
					id: this.$store.state.userInfo.id
				}).then(res => {
					//上传成功 同步图片到本地
					this.$store.commit('SAVEUSER', {
						photo: res.photo || this.info.photo
					});
					uni.showToast({
						duration: 1500,
						title: "设置成功"
					});
					setTimeout(e => {
						uni.redirectTo({
							url: './personage_center'
						})
					}, 1000);
				}).finally(this.$loading({
					msg: '设置中'
				}));
			}
		}
	};
</script>
<style lang="scss" scoped>
	.image-box {
		position: relative;

		&::after {
			content: '';
			display: block;
			padding-top: 100%;
		}

		.vue-cropper {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			margin: auto;
		}
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;

		.btn {
			width: 40%;
			margin: 0 5%;
		}
	}
</style>
